<template>
  <div class="beautyTui">
    <div class="homeBanner">
      <Banner :banners="banners"/>
    </div>
    <div class="homeNav">
      <ul>
        <li>
          <router-link to="/jixuanArticle">精选文章</router-link>
        </li>
        <li>
          <router-link to="/activeRecommend">活动推荐</router-link>
        </li>
        <li>
          <router-link to="/signInView">美日一签</router-link>
        </li>
      </ul>
    </div>
    <h2>
      <img :src="titleHeart">
        活动专题
      <img :src="titleHeart">
    </h2>
    <Zhuanti 
      v-if="bloggerInfos.length>0" 
      v-for="(item,index) in bloggerInfos"
      :key="index"
      :bloggerInfo="item"
      title="活动专题"
    />
    <div v-else>数据正在加载...</div>  
  </div>
</template>
<script>
import Banner from "./banner.vue"
import Zhuanti from "./zhuanti.vue"

export default {
  name: "BeautyTui",
  data() {
    return {
      banners: [],
      bloggerInfos: [],
      bloggerInfo:{},
      titleHeart: require("../assets/icon/mine/title_heart.png")
    }
  },
  mounted() {
    var that = this;
    var flag = true;
    //获取轮播图信息
    that.$axios.get("http://localhost:3000/api/articles?count=3")
    .then(res => {
      // console.log(res.data);
      that.banners = res.data;
      
    })
    .catch(error => {
      console.log(new error(error))
    });
    // 获取活动专题信息
    that.$axios.get("http://localhost:3000/api/bloggerInfo?count=5")
    .then(res => {
      // console.log(res.data);
      that.bloggerInfos = res.data;
    })
    .catch(error => {
      console.log(new error(error))
    });
    
    // 加载更多处理
    window.addEventListener("scroll",function(){
      if(document.body.scrollTop + window.innerHeight >= document.body.offsetHeight){
        if(flag==true){
          flag = false;
          that.$axios.get("http://localhost:3000/api/bloggerInfo?count=5")
          .then(res => {
            // console.log(res.data);
            that.bloggerInfos = that.bloggerInfos.concat(res.data);
            flag = true;
          })
          .catch(error => {
            console.log(new error(error))
          });
        }
      }
    })
  },
  components: {
    Banner,
    Zhuanti
  }
}
</script>
<style lang="less" scoped>
  .beautyTui{
    position: absolute;
    top: 90px;
    left: 10px;
    width: 94.7%;
    padding-bottom: 70px;
    .homeBanner{
      width: 100%;
      height: 180px;
      // border-radius: 8px;
      .swiper-container {
        border-radius: 8px;
        height: 180px;
      }
    }
    .homeNav{
      background-color: #fff;
      height: 70px;
      border-radius: 8px;
      box-shadow: 0 2px 20px rgba(0,0,0,.15);
      margin-top: 20px;
      li{
        width: 33.33%;
        float: left;
        // padding: 0 15px;
        line-height: 70px;
        a{
          font-size: 16px;
          color: #4d4d4d;
        }
      }
    }
    h2{
      font-weight: normal;
      color: #333;
      font-size: 20px;
      text-align: center;
      margin: 20px 0;
    }
  }
</style>


